<template>
  <el-dialog v-model="visible" title="设置企业申请页" width="1100" :close-on-click-modal="false">
    <div class="">
      <div class="flex gap-2 items-baseline">
        <div class="flex-none font-bold">可选字段：</div>
        <div class="flex gap-2 flex-wrap">
          <el-check-tag
            :checked="item.checked"
            @change="handleCheck(item, $event)"
            type="warning"
            v-for="item in optionalFields"
            :key="item.key"
          >
            {{ item.name }}
          </el-check-tag>
        </div>
      </div>

      <div class="mt-4 flex flex-wrap gap-2">
        <div
          v-for="item in selectedFields"
          :key="item.key"
          class="inline-flex gap-2 items-center w-[calc(33.33%-6px)] bg-white/5 p-2 box-border rounded"
        >
          <span class="flex-none w-60px text-xs">
            <el-checkbox v-model="item.required">必填</el-checkbox>
          </span>
          <span class="flex-none w-160px font-bold">
            {{ item.name }}
          </span>
          <span class="flex-auto text-white/60 text-xs">{{ typeList[item.type] }}</span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'

defineOptions({
  name: 'CompanyApplySettingModal'
})

const visible = defineModel({ type: Boolean, required: true, default: false })

const initialOptionalFields = () => [
  {
    key: 'kk1',
    name: '企业名称',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk2',
    name: '企业编码',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk3',
    name: '注册时间',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk4',
    name: '企业名称4',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk5',
    name: '企业编码5',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk6',
    name: '注册时间6',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk7',
    name: '企业名称47222',
    type: 2,
    checked: false,
    required: false
  },
  {
    key: 'kk8',
    name: '企业编码58333',
    type: 3,
    checked: false,
    required: false
  },
  {
    key: 'kk9',
    name: '注册时间69444',
    type: 4,
    checked: false,
    required: false
  }
]

const initialSelectedFields = () => [
  {
    key: 'k1',
    name: '大分类',
    type: 1,
    checked: false,
    required: false
  },
  {
    key: 'k2',
    name: '小分类',
    type: 1,
    checked: false,
    required: false
  },
  {
    key: 'k3',
    name: '企业注册地址',
    type: 1,
    checked: false,
    required: false
  }
]

const optionalFields = reactive(initialOptionalFields())
const selectedFields = reactive(initialSelectedFields())

const typeList = {
  1: '固定项',
  2: '文本',
  3: '数字',
  4: '上传'
}

const handleCheck = (item: any, value: boolean) => {
  if (value) {
    selectedFields.push({ ...item })
  } else {
    const index = selectedFields.findIndex((_item) => _item.key === item.key)
    selectedFields.splice(index, 1)
  }
  item.checked = value
}

watchEffect(() => {
  if (!visible.value) {
    optionalFields.length = 0
    optionalFields.push(...initialOptionalFields())

    selectedFields.length = 0
    selectedFields.push(...initialSelectedFields())
  }
})
</script>
